import React, { Component, Fragment } from 'react';
import { Button, Drawer, Form, Input, TreeSelect, message } from 'antd';
import { save } from '@/services/permission';

import { TableMethods } from '@/common/Hoc/data';
import { SimpleSaveHoc } from '@/common/Hoc/SimpleSaveHoc';
import Radio from 'antd/es/radio';

const FormItem = Form.Item;

const baseMethods: TableMethods = {
  getSave: (param: any) => save(param),
};

@SimpleSaveHoc(baseMethods)
// @ts-ignore
@Form.create()
export default class extends Component<any, any> {
  constructor(props: any) {
    super(props);

    this.state = {
      type: 0,
      menuList: [],
    };
  }
  afterVisibleChange = (visible: boolean) => {
    if (visible) {
      let menuList = this.convertMenuList(this.props.menuList);
      let type = 0;
      if (this.props.currentData && this.props.currentData.type) {
        type = this.props.currentData.type;
      }
      this.setState({
        type: type,
        menuList: menuList,
      });
    }
  };

  formLayout = {
    labelCol: { span: 5 },
    wrapperCol: { span: 15 },
  };

  typeChange = (e: any) => {
    this.setState({
      type: e.target.value,
    });
  };

  convertMenuList = (menu: any) => {
    if (!menu) {
      return [];
    } else {
      return menu.map((item: any) => {
        let rs: any = {};
        rs.title = item.menuName;
        rs.value = item.id;
        rs.key = item.id;
        if (item.children && item.children.length > 0) {
          rs.children = this.convertMenuList(item.children);
        }
        return rs;
      });
    }
  };

  preSave = (form: any, currentData: any, filterData?: Function) => {
    if (form.getFieldValue('parentId') && form.getFieldValue('parentId') === currentData.id) {
      message.error('上级菜单不能是当前菜单');
      return;
    }
    this.props.saveData(form, currentData);
  };

  render() {
    const { modalVisible, currentData, form, loading } = this.props;

    return (
      <Drawer
        title="目录管理"
        destroyOnClose={true}
        maskClosable={true}
        width={620}
        afterVisibleChange={this.afterVisibleChange}
        onClose={() => this.props.handleModalVisible(false)}
        visible={modalVisible}
        bodyStyle={{ paddingBottom: 80 }}
      >
        <FormItem key="type" {...this.formLayout} label="目录类型">
          {form.getFieldDecorator('type', {
            initialValue: currentData.type,
          })(
            <Radio.Group onChange={this.typeChange} buttonStyle="solid">
              <Radio.Button value={0}>一级菜单</Radio.Button>
              <Radio.Button value={1}>子菜单</Radio.Button>
              <Radio.Button value={2}>按钮/权限</Radio.Button>
            </Radio.Group>,
          )}
        </FormItem>
        <FormItem
          key="menuName"
          {...this.formLayout}
          label={this.state.type !== 2 ? '菜单名称' : '按钮/权限'}
        >
          {form.getFieldDecorator('menuName', {
            initialValue: currentData.menuName,
          })(<Input placeholder={this.state.type !== 2 ? '请输入菜单名称' : '请输入按钮/权限'} />)}
        </FormItem>

        {this.state.type !== 0 ? (
          <FormItem key="parentId" {...this.formLayout} label="上级菜单">
            {form.getFieldDecorator('parentId', {
              initialValue: currentData.parentId,
            })(
              <TreeSelect
                style={{ width: '100%' }}
                dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                treeData={this.state.menuList}
                treeCheckStrictly
                placeholder="请选择上级菜单"
                treeDefaultExpandAll
              />,
            )}
          </FormItem>
        ) : null}

        {this.state.type !== 2 ? (
          <Fragment>
            <FormItem key="routerUrl" {...this.formLayout} label="路由地址">
              {form.getFieldDecorator('routerUrl', {
                initialValue: currentData.routerUrl,
              })(<Input placeholder="请输入路由地址" />)}
            </FormItem>

            <FormItem key="componentName" {...this.formLayout} label="组件">
              {form.getFieldDecorator('componentName', {
                initialValue: currentData.componentName,
              })(<Input placeholder="请输入组件" />)}
            </FormItem>
          </Fragment>
        ) : null}

        {this.state.type === 0 ? (
          <FormItem key="menuIcon" {...this.formLayout} label="菜单图标">
            {form.getFieldDecorator('menuIcon', {
              initialValue: currentData.menuIcon,
            })(<Input placeholder="请输入菜单图标" />)}
          </FormItem>
        ) : null}

        <FormItem key="permsCode" {...this.formLayout} label="权限标识">
          {form.getFieldDecorator('permsCode', {
            initialValue: currentData.permsCode,
          })(<Input placeholder="菜单组件:权限code 例如 user:add" />)}
        </FormItem>

        <FormItem key="priority" {...this.formLayout} label="排序">
          {form.getFieldDecorator('priority', {
            initialValue: currentData.priority,
          })(<Input placeholder="请输入排序" />)}
        </FormItem>

        <div>
          <Button type="primary" loading={loading} onClick={() => this.preSave(form, currentData)}>
            保存目录
          </Button>
        </div>
      </Drawer>
    );
  }
}
